<template>
  <div class="login">
    <div class="logo"></div>
    <div class="float-on-bg">
      <div class="float-icona"></div>
      <div class="float-iconb"></div>
      <div class="float-iconc"></div>
      <div class="float-icond"></div>
    </div>
    <div class="login-con">
      <div class="log-bg"></div>
      <Card icon="log-in" :bordered="false">
        <!--
        <p slot="title">
            <img class="login-icon" :src="loginIcon">
            {{$t('login.title')}}
        </p>
        -->
        <div class="form-title">{{$t('login.title')}}</div>
        <div class="form-con">
          <Form ref="loginForm" :model="formInline" :rules="ruleInline" @keydown.native.enter.prevent ="handleSubmit" @keyup.enter="keyDownEvent()">
            <FormItem prop="userName">
              <Input class="login-input" v-model.trim="formInline.userName" :placeholder='$t("login.placeholderUsername")' autocomplete="off">
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input class="login-input" type="password" v-model="formInline.password" :placeholder='$t("login.placeholderPassword")'  autocomplete="off">
              </Input>
            </FormItem>
            <FormItem prop="wpbool">
              <Checkbox class="login-checkbox" v-model="wpbool" @on-change="changPw">{{ $t("login.loginForgetPW") }}</Checkbox><!--<span>{{ $t("login.loginDownApp") }}--></span>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long  class="button-shadow" :loading="loading">{{ $t("login.loginBtn")}}</Button>
            </FormItem>
            <p class="login-tip" v-show="showTip">{{ $t("login.loginTip") }} <Icon type="md-arrow-round-forward" /></p>
          </Form>
        </div>
      </Card>
    </div>

    <div class="login-foot">
      <div class="qrcode">
        <div class="android"></div>
        <div class="ios"></div>
      </div>
      技术支持：北京华勤创新软件有限公司
    </div>

  </div>
</template>

<script>
import i18n from "./locale";
import ValidatorRule from "@/filters/validator-rule";
import { mapActions } from "vuex";
import loginIcon from "@/assets/images/logo-icon.png";
export default {
  name: "login",
  components: {},
  data() {
    return {
      i18n: i18n,
      showTip: false,
      loginIcon: loginIcon,
      loading: false,
      formInline: {
        userName: "",
        password: ""
      },
      ruleInline: {
        userName: ValidatorRule.user,
        password: ValidatorRule.password
      },
      wpbool: false
    };
  },

  methods: {
    ...mapActions(["handleLogin", "handleAccess"]),

    gotoIndex() {
      this.$router.push({
        name: "index",
        query: { from: "login" }
      });
    },

    handleSubmit() {
      let tthis = this;
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let userName = this.formInline.userName,
            password = this.formInline.password;
          if (!this.loading) {
            this.loading = true;
            this.handleLogin({ userName, password })
              .then(res => {
                setTimeout(function() {
                  tthis.loading = false;
                }, 1000);
                if (res) {
                  this.goToNext();
                }
              })
              .catch(err => {
                setTimeout(function() {
                  tthis.loading = false;
                }, 1000);
                if (err.msg) {
                  this.$Message.error({
                    duration: 2,
                    content: err.msg
                  });
                } else {
                  this.$Message.error("服务内部错误");
                }
              });
          }
        }
      });
    },

    changPw(value) {
      console.log("changPw", value);
    },

    goToNext() {
      this.$router.push({
        name: "home"
      });
    }
  }
};
</script>
<style lang="less" >
@import "./login.less";
</style>
